<template>
  <div class="song">
    <div class="tab-bar">
      <span class="item" @click="tag = 0" :class="{ active: tag == 0 }">
        全部
      </span>
      <span class="item" @click="tag = 7" :class="{ active: tag == 7 }">
        华语
      </span>
      <span class="item" @click="tag = 96" :class="{ active: tag == 96 }">
        欧美
      </span>
      <span class="item" @click="tag = 8" :class="{ active: tag == 8 }">
        日本
      </span>
      <span class="item" @click="tag = 16" :class="{ active: tag == 16 }">
        韩国
      </span>
    </div>
    <!-- 底部的table -->
    <table class="el-table playlit-table">

      <tbody>
        <tr v-for="(item, index) in lists" :key="index" class="el-table__row">
          <td>{{ index + 1 }}</td>
          <td>
            <div class="img-wrap">
              <img :src="item.album.picUrl" alt="" />
              <span @click="playMusic(item.id)" class="el-icon-video-pause"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </td>
          <td class="gs">{{ item.album.artists['0'].name | ellipsisa}}</td>
          <td class="zj">{{ item.album.name | ellipsis}}</td>
          <td class="sj">{{ item.duration }}</td>
        </tr>
      </tbody>
    </table> 
		
	
		<div class="d"></div>
  </div>
</template>

<script>
// 导入 axios
import axios from "axios";
import InfiniteLoading from "vue-infinite-loading";
export default {
  name: "songs",
  data() {
    return {
      // 歌曲列表
      lists: [],
      // 分类
      tag: "0",
      page: 1,
      loading: false,
      list: [],
			tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    };
  },

  watch: {
    tag() {
      this.getList();
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      // 获取 最新音乐数据
      axios({
        url: "https://autumnfish.cn/top/song",
        method: "get",
        params: {
          // 传递 设置的数据
          type: this.tag,
        },
      }).then((res) => {
        // console.log(res)
        this.lists = res.data.data;
        // 处理时长 毫秒 转为 分秒
        for (let i = 0; i < this.lists.length; i++) {
          // 获取 总毫秒数
          let duration = this.lists[i].duration;
          // 假定 	350750 毫秒
          // 秒 350750/1000  350秒
          // 分 350 /60
          // 秒 350 % 60
          let min = parseInt(duration / 1000 / 60);
          if (min < 10) {
            min = "0" + min;
          }
          let sec = parseInt((duration / 1000) % 60);
          if (sec < 10) {
            sec = "0" + sec;
          }
          // console.log(min + '|' + sec)
          this.lists[i].duration = `${min}:${sec}`;
        }
      });
    },
    infiniteHandler() {
      // 这里模仿加载延迟1秒钟
      setTimeout(() => {
        let temp = [];
        for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i);
        }
        this.list = this.list.concat(temp);
      }, 1000);
    },
    // 播放歌曲
    playMusic(id) {
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id, // id:id
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        // console.log(url);
        // 直接获取父组件，可以修改任意的值
        // console.log(this.$parent);
        // console.log(this.$parent.musicUrl);
        // debugger
        //这块通过dispatch调用action里面的方法。把url作为参数传过去。这样store里面的url就被修改了
        this.$store.dispatch("SETMUSICURL", url);
        //这个写法就是错的。不能直接修改。    就这。
        // this.$store.state.url = url
        // this.$emit('handlechangemusic',url)
        console.log(url);
      });
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
    ellipsisa(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
  components: {
    InfiniteLoading,
  },
};
</script>
<style scoped>
	.el-table{
		width: 1000px;
	}
	element.style {
    width: 1000px;
}
.song {
  position: absolute;
  top: 130px;
  left: 200px;
}
.tab-bar {
  position: relative;
  left: 20px;
  top: 70px;
}
.tab-bar .item {
  margin-left: 10px;
}
.d {
  height: 1260px;
}

.el-table {
  position: absolute;
  top: 110px;
}
.el-table__row {
  width: 900px;
  height: 90px;
}
.el-table__row td .img-wrap img {
  position: relative;
  margin-top: 30px;
  height: 90px;
  width: 90px;
}
.name-wrap {
  width: 300px;
}
.song-wrap {
  display: flex;
}

.active {
  color: red;
}

.zj {
  padding-left: 150px;
  height: 20px;
}
.sj {
  padding: 0 200px;
}
.el-icon-video-pause {
  position: absolute;
  right: 30px;
  top: 75px;
  font-size: 30px;
  color: red;
  cursor: pointer;
}

</style>